<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试工具</title>
    <!-- 使用本地Bootstrap CSS而非CDN -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        /* 直接在HTML中添加关键样式，确保即时生效 */
        .split-view-container {
            display: flex;
            flex-direction: row;
            width: 100%;
            min-height: 80vh;
            gap: 15px;
        }

        .split-panel {
            flex: 1;
            min-width: 0; /* 防止内容溢出 */
            overflow: hidden;
        }

        #finalUrl {
            width: 100%;
            overflow: auto;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /* 修复标签页内容区域 */
        .tab-content {
            margin-top: 10px;
        }

        .tab-pane {
            width: 100%;
        }

        pre {
            width: 100%;
            overflow-x: auto;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="app-header">
        <div class="container">
            <h1 class="app-title">⚡ API测试工具</h1>
        </div>
    </div>

    <div class="container">
        <!-- 使用自定义的分栏容器替代Bootstrap网格 -->
        <div class="split-view-container">
            <!-- 左侧请求配置面板 -->
            <div class="split-panel">
                <div class="card h-100">
                    <div class="card-header">
                        📡 请求配置
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <label for="apiSelect" class="form-label">选择API端点</label>
                            <select id="apiSelect" class="form-select">
                                <option value="" selected>-- 选择API --</option>
                                {% for route in routes %}
                                <option value="{{ loop.index0 }}" data-method="{{ route.method }}"
                                        data-uri="{{ route.uri }}" data-handler="{{ route.handler }}">
                                    {{ route.method }} {{ route.uri }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                <label class="form-label">HTTP方法</label>
                                <div id="methodBadgeContainer">
                                    <span class="method-badge" id="methodBadge" style="background-color: #ccc;">-</span>
                                </div>
                                <input type="hidden" id="methodDisplay">
                            </div>

                            <div class="col-md-8">
                                <label for="baseUrl" class="form-label">基础URL</label>
                                <div class="input-group">
                                    <span class="input-group-text">🌐</span>
                                    <input type="text" id="baseUrl" class="form-control" value="http://localhost:8000"
                                           placeholder="例如: http://localhost:8000">
                                </div>
                            </div>
                        </div>

                        <div id="paramsContainer" class="mb-4">
                            <label class="form-label">🔗 路径参数</label>
                            <div class="text-muted mb-2 small">选择API后，此处将显示所需的路径参数</div>
                        </div>

                        <!-- 就在这里添加查询参数容器 -->
                        <div id="queryParamsContainer" class="mb-4" style="display: none;">
                            <label class="form-label">🔍 查询参数 (Query Parameters)</label>
                            <div class="query-params-table">
                                <table class="table table-sm">
                                    <thead>
                                    <tr>
                                        <th>参数名</th>
                                        <th>参数值</th>
                                        <th width="50"></th>
                                    </tr>
                                    </thead>
                                    <tbody id="queryParamsBody">
                                    <!-- 参数会通过JS动态添加 -->
                                    </tbody>
                                </table>
                                <button id="addQueryParam" class="btn btn-sm btn-outline-primary mt-2">
                                    <span>➕ 添加参数</span>
                                </button>
                            </div>
                        </div>

                        <div id="bodyContainer" class="mb-4" style="display: none;">
                            <label for="requestBody" class="form-label">📄 请求体 (JSON)</label>
                            <!-- 修改JSON文件控制按钮区域 -->
                            <div class="json-file-controls mb-2">
                                <div class="d-flex align-items-center mb-2">
                                    <input type="file" id="jsonFileInput" accept=".json" class="d-none">
                                    <button id="loadJsonBtn" class="btn btn-sm btn-outline-secondary me-2">
                                        📂 加载JSON文件
                                    </button>
                                    <button id="saveJsonBtn" class="btn btn-sm btn-outline-secondary">
                                        💾 保存为文件
                                    </button>
                                </div>
                                <div class="d-flex align-items-center flex-wrap">
                                    <div class="d-flex align-items-center me-2" style="min-width: 70px; flex-shrink: 0;">
                                        <label for="customFileName" class="small mb-0">文件名:</label>
                                    </div>
                                    <div class="d-flex align-items-center flex-grow-1">
                                        <input type="text" id="customFileName" class="form-control form-control-sm" style="max-width: 230px;">
                                        <span class="ms-2 small text-muted">.json</span>
                                    </div>
                                </div>
                            </div>

                            <textarea id="requestBody" class="form-control" rows="8" placeholder='{"key": "value"}'></textarea>
                            <div class="text-muted mt-2 small">
                                ℹ️ 请确保输入有效的JSON格式
                            </div>
                        </div>


                        <div id="finalUrlContainer" class="mb-4">
                            <label class="form-label">🔗 最终请求URL</label>
                            <input type="text" id="finalUrl" class="form-control" disabled>
                        </div>

                        <div class="send-btn-container">
                            <button id="sendRequest" class="btn btn-primary" disabled>
                                📤 发送请求
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧响应结果面板 -->
            <div class="split-panel">
                <div class="card h-100">
                    <div class="card-header">
                        📥 响应结果
                    </div>
                    <div class="card-body">
                        <div id="responseContainer" class="response-container">
                            <div id="responseStatus"></div>

                            <!-- 修复标签页对应关系 -->
                            <ul class="nav nav-tabs" id="responseTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="response-body-tab" data-bs-toggle="tab"
                                            data-bs-target="#response-body-content" type="button" role="tab">
                                        📝 响应体
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="response-headers-tab" data-bs-toggle="tab"
                                            data-bs-target="#response-headers-content" type="button" role="tab">
                                        📋 响应头
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content" id="responseTabContent">
                                <div class="tab-pane fade show active" id="response-body-content" role="tabpanel"
                                     aria-labelledby="response-body-tab">
                                    <pre id="responseBody">选择一个API并发送请求</pre>
                                </div>
                                <div class="tab-pane fade" id="response-headers-content" role="tabpanel"
                                     aria-labelledby="response-headers-tab">
                                    <pre id="responseHeaders"></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="mt-4 mb-5 text-center text-muted">
            <p><big>API测试工具 &copy; 许继电气 2025</big></p>
        </footer>
    </div>
</div>

<!-- 使用本地JavaScript文件替代CDN -->
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
